<template>
    <!-- 容器 -->
    <div class="container">
        <!-- <Public></Public> -->
        <!-- 展示区域 -->
        <el-card class="w" shadow="never" style="border-radius: 0px; box-sizing: border-box; margin-bottom: 10px">
            <div class="top" :class="{ isHidden: isFold }">
                <el-row :gutter="20" class="filter" v-for="(choise,index) in discoveryStore.choises" :key="index">
                    <el-col :span="2">
                        <div class="filter_title">{{choise.label}}：</div>
                    </el-col>
                    <el-col :span="22">
                        <span class="filter_content" v-for="(item,index) in choise.choises" :key="item.id"
                            @click="handler(item,choise.choises)"
                            :class="{abc:item.actvieId}">{{item.name}}</span>
                    </el-col>
                </el-row>
            </div>
            <div class="fold_toggle_container w" @click="changeHeight">{{isFold?'展开全部' : '收起'}}</div>
        </el-card>


        <!-- 综合排序 -->
        <div class="sort-container w">
            <div class="sort_text active">综合排序</div>
            <div class="sort_text">销量</div>
            <!-- <div>评价</div> -->
            <div class="sort_text">浏览量</div>
            <div>
                <el-dropdown class="sort_text">
                    <div class="sort-dropdown-text">
                        <div>价格</div>
                        <el-icon>
                            <ArrowDown />
                        </el-icon>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>价格由高到低</el-dropdown-item>
                            <el-dropdown-item>价格由低到高</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="sort_text">发布时间</div>
        </div>


        <!-- 视频展示 -->
        <!-- 一列 -->
        <div class="column">
            <!-- 每个 -->
            <div class="col" v-for="(item,index) in recommendStore.recommend.videoList" :key="item.id">
                <div class="col_top">
                    <img :src="item.cover[0]">
                </div>
                <div class="col_center">
                    <a>{{item.title}}</a>
                    <div class="col_center_center">
                        <div class="col_center_center_left">￥ {{item.initExposureNum}}</div>
                        <div class="col_center_center_right">{{item.statisticsBackup?.viewCount}}人浏览</div>
                    </div>
                    <div class="vip-icon">
                        <img src="../../../../assets/images/vip_free.png" alt="">
                    </div>
                    <div class="icon_container">
                        <div class="icon">
                            <svg t="1666163861666" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4043" width="14" height="14">
                                <path
                                    d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z"
                                    p-id="4044" fill="#bfbfbf"></path>
                            </svg>
                        </div><span>{{item.statisticsBackup?.praiseCount}}</span>
                        <div class="icon">
                            <svg t="1666164204655" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="6904" width="14" height="14">
                                <path
                                    d="M920.3328 0 102.22464 0C45.7664 0 0 45.7664 0 102.2144l0 511.14624c0 56.44928 45.7664 102.2144 102.22464 102.2144l178.98368 0 230.06976 306.6752 230.06976-306.6752L920.3328 715.57504c56.44928 0 102.22464-45.7664 102.22464-102.2144L1022.55744 102.2144C1022.55872 45.7664 976.78208 0 920.3328 0zM230.4 394.88c-42.41536 0-76.8-34.38464-76.8-76.8s34.38464-76.8 76.8-76.8 76.8 34.38464 76.8 76.8S272.81536 394.88 230.4 394.88zM512 394.88c-42.41536 0-76.8-34.38464-76.8-76.8s34.38464-76.8 76.8-76.8 76.8 34.38464 76.8 76.8S554.41536 394.88 512 394.88zM793.6 394.88c-42.41536 0-76.8-34.38464-76.8-76.8s34.38464-76.8 76.8-76.8 76.8 34.38464 76.8 76.8S836.01536 394.88 793.6 394.88z"
                                    p-id="6905" fill="#bfbfbf"></path>
                            </svg>
                        </div><span>{{item.statisticsBackup?.commentCount}}</span>
                        <div class="icon">
                            <svg t="1666164268603" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="7963" data-spm-anchor-id="a313x.7781069.0.i19"
                                width="14" height="14">
                                <path
                                    d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z"
                                    p-id="7964" fill="#bfbfbf"></path>
                            </svg>
                        </div><span>{{item.statisticsBackup?.favoriteCount}}</span>
                    </div>

                </div>
                <div class="col_bottom">
                    <div class="col_bottom_container_left">
                        <img :src="item.creatorBackup?.avatar" class="img1">
                        <div class="col_bottom_container_left_son">{{item.creatorBackup?.name}}</div>
                        <img src="../../../../assets/images/zuanshi.png" class="img2">
                    </div>
                    <div class="col_bottom_container_right">
                        <div class="col_bottom_container_right_son">19-01-31</div>
                    </div>
                </div>
            </div>

        </div>

        <!-- 加载更多和回到顶部 -->
        <div class="load_container">
            <div class="load">加载更多</div>
        </div>
    </div>
    <div class="arrow_container">
        <a href="#ding">
            <img src="../../../assets/images/top-arrow.png" />
        </a>
    </div>

</template>

<script lang="ts" setup>
import useDiscoveryStore from '../../../stores/discovery'
import { ref } from 'vue'
import useRecommendStore from '../../../stores/recommend'
import { ElMessage } from 'element-plus';
const recommendStore = useRecommendStore()
// 控制展开收缩
let isFold = ref(true)
// 收缩或展开的回调
const changeHeight = () => {
    isFold.value = !isFold.value
}

// 拿到仓库数据
const discoveryStore = useDiscoveryStore()

// 点击高亮
const handler = (item, itemList) => {
    if (item.actvieId) {
        item.actvieId = false
        return
    }
    let result = itemList.filter((item) => {
        return item.actvieId
    })
    if (result.length > 2) {
        return ElMessage({
            message: '最多选择三个数据',
            duration: 1000,
        })
    }
    item.actvieId = true
}
</script>
<style scoped>
/* 容器 */
.container {
    width: 1200px;
    margin: 0 auto;
    border-radius: 4px;
}

/* 展示 */
.top {
    padding: 20px 30px 0;
}

.filter {
    position: relative;
}
/* 最多选择三个的样式 */
.abc {
    background: #f93684;
    padding: 7px 13px;
    border-radius: 4px;
    color: white !important;
}
/* // 点击收起时 */
.isHidden {
    height: 136px;
    overflow: hidden;
}

.filter_title {
    color: #b1b5c1;
    padding: 7px 0;
    box-sizing: border-box;
    font-size: 14px;
}

.filter_content {
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    color: #7d8090;
    padding: 7px 13px;
    user-select: none;
    margin-right: 24px;
    margin-bottom: 10px;
}

/* // 筛选文字的选中状态 */
.filter_content_active {
    background-color: #f93684;
    color: #fff;
}

/* // 点击展开 */
.fold_toggle_container {
    /* // height: 30px; */
    text-align: center;
    color: #f93684;
    font-size: 14px;
    margin: 10px auto 0;
    background-color: #fff;
    cursor: pointer;
}

/* 综合排序 */
.sort-container {
    height: 75px;
    display: flex;
    align-items: center;
    background-color: #fff;
    width: 1200px;
    margin: 0 auto;
    padding-left: 30px;
    box-sizing: border-box;
}

.sort_text {
    display: inline-block;
    font-size: 14px;
    color: #7d8090;
    cursor: pointer;
    margin-right: 40px;
    display: flex;
    align-items: center;
}

.sort-dropdown-text {
    display: flex;
}

.active {
    color: #f93684;
}

/* 视频展示区 */
/* 一列的容器 */
.column {
    width: 1200px;
    /* height: 280px; */
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    /* margin-top: 20px;
    padding-bottom: 20px;
    height: 30px; */
    /* background-color: #bfc; */
    /* display: flex;
    justify-content: space-between; */
}

/* 每一个视频块 */
.col {
    width: 224px;
    height: 281px;
    background-color: white;
    margin-top: 20px;
}

/* 上部分 */
.col_top img {
    display: block;
    width: 224px;
    height: 126px;
}

/* 中间 */
.col_center {
    width: 204px;
    padding-top: 5px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 13px;
    border-bottom: 1px solid #ebeced;
    display: block;
    white-space: nowrap;
    /*规定文本不换行**/
    overflow: hidden;
    text-overflow: ellipsis;
    /**显示省略符号来代表被修剪的文本。*/
}

/* 小标题 */
.col_center a {
    color: #000;
    font-size: 14px;
    /* text-decoration: none; */
    /* word-break: break-all; */
}

/* 价格 */
.col_center_center {
    display: flex;
    justify-content: space-between;
    width: 204px;
    height: 32px;
    /* padding: 0px 0px 7px; */
    display: flex;
    align-items: baseline;
}

.col_center_center_left {
    color: #f93684;
    font-size: 16px;
    margin-top: 10px;
}

.col_center_center_right {
    color: #b1b5c1;
    /* color: #f93684; */

    font-size: 12px;
    margin-top: 10px;
}

/* 会员免费 */
.vip-icon img {
    display: block;
    width: 38px;
    height: 14px;
}

/* 点赞 评论 收藏 */
.icon_container {
    display: flex;
    align-items: baseline;
}

.icon {
    display: inline-block;
    margin-right: 5px;
}

/* 该部分所有文字样式 */
.col_center span {
    font-size: 12px;
    margin-right: 18px;
    color: #b1b5c1;
}

/* 下部分 */
.col_bottom {
    width: 208px;
    height: 50px;
    padding-left: 16px;
    /* background-color: yellowgreen; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.col_bottom_container_left {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 下部分文字样式 */
.col_bottom_container_left_son {
    font-size: 12px;
    margin-left: 8px;
    color: #111111;
}

.col_bottom_container_right_son {
    font-size: 12px;
    padding-right: 8px;
    color: #b1b5c1;
}

/* 小头像 */
.col_bottom .img1 {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

/* 小钻石 */
.col_bottom .img2 {
    width: 12px;
    height: 12px;
    padding-left: 4px;
}

/* 加载和回到顶部 */
.load_container {
    width: 1200px;
    height: 50px;
    background-color: #F5F7F9;
    margin: 50px 0px;
    /* background-color: yellowgreen; */
}

.load {
    margin: auto;
    width: 142px;
    height: 42px;
    color: #82858e;
    background-color: white;
    line-height: 42px;
    text-align: center;
    border-radius: 5px;

}

.load:hover {
    background-color: rgb(220, 217, 217);
}

.arrow_container {
    width: 40px;
    height: 40px;
    position: sticky;
    left: 1400px;
    bottom: 50px;
    margin-bottom: 50px;
}

.arrow_container img {
    width: 100%;
}
</style>